<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单校验</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
			}
			body{
				background: url(../../img/register_bg.png);
				padding-top: 25px;
			}
			.rg_layout{
				width: 900px;
		        height: 500px;
		        border: 8px solid #EEEEEE;
		        background-color: white;
		        /*让div水平居中*/
		        margin: auto;
			}
			.rg_left{
				float: left;
       			 margin: 15px;
			}
			
			.rg_left > p:first-child{
       			 color:#FFD026;
        		font-size: 20px;
   			 }

		    .rg_left > p:last-child{
		        color:#A6A6A6;
		        font-size: 20px;
		
		    }
			.rg_center{
				float: left;
			}
			.rg_right{
				float: right;
        		margin: 15px;
			}
			.rg_right p a{
				color:pink;
			}
			
			.td_left{
		        width: 100px;
		        text-align: right;
		        height: 45px;
		    }
		    .td_right{
		        padding-left: 50px ;
		    }
		    #username,#password,#email,#name,#tel,#birthday{
		        width: 251px;
		        height: 32px;
		        border: 1px solid #A6A6A6 ;
		        /*设置边框圆角*/
		        border-radius: 5px;
		        padding-left: 10px;
		    }
		  
		    #btn_sub{
		        width: 150px;
		        height: 40px;
		        background-color: #FFD026;
		        border: 1px solid #FFD026 ;
		    }
		    .error{
		        color:red;
		    }
		    .warring{
		    	color: blue;
		    }
		    #td_sub{
		        padding-left: 150px;
		    }
		</style>
		
		<script type="text/javascript">
			/*分析：*/
			window.onload = function(){
				document.getElementById("regiest").onsubmit = function(){
					
				}
				//用户名和密码绑定离焦事件
				document.getElementById("username").onblur = checkUsername;
				//检验用户用
				function checkUsername(){
					var username = document.getElementById("username").value;
					//正则表达式
					var reg_username = /^\w{6,12}$/;
					var flag = reg_username.test(username);
					var s_username = document.getElementById("s_username");
					if(flag){
						s_username.innerHTML = "<img src='../../img/gou.png' width='35' height='25'/>"
					}else{
						s_username.className = "warring";
						s_username.innerHTML  = "用户名错误";
						s_username.style.color = "mediumspringgreen";
					}
					
				}
				//校验手机号码
			}
		</script>
	</head>
	<body>
		 <div class="rg_layout">
		 	<div class="rg_left">
		 		<p>新用户注册</p>
		 		<p>USER REGISTER</p>
		 	</div>
		 
		 <div class="rg_center">
		 	<div class="rg_form">
		 		<!--定义表单form-->
		 		<form action="#" method="post" id="regiest">
		 			<table>
		 				<tr>
		 					<td class="td_left"><label for="username">用户名</label></td>
		 					<td class="td_right">
		 						<input type="text" name="username" value="" placeholder="请输入用户名" id="username"/>
		 						<span id="s_username" class="error">
		 							</span>
		 					</td>
		 				</tr>
		 				
		 				<tr>
		 					<td class="td_left"><label for="password">密码</label> </td>
		 					<td class="td_right">
		 						<input type="password" placeholder="请输入密码" name="password" id="password"/>
		 						<span class="error" id="s_password"></span>
		 					</td>
		 				</tr>
		 				
		 				<tr>
		 					<td class="td_left"> <label for="email">邮箱</label></td>
		 					<td class="td_right">
		 						<input type="email" name="email" id="email" value="" placeholder="请输入邮箱"/>
		 						<span class="error" id="s_email"></span>
		 					</td>
		 					
		 				</tr>
		 					<tr>
		 					<td class="td_left"> <label for="name">姓名</label></td>
		 					<td class="td_right">
		 						<input type="text" name="name" id="name" value="" placeholder="请输入姓名"/>
		 						
		 					</td>
		 					
		 				</tr>
		 				
		 					<tr>
		 					<td class="td_left"><label for="tel">手机号</label></td>
		 					<td class="td_right">
		 						<input type="text" name="tel" id="tel" value="" placeholder="请输入手机号码"/>
		 						<span id="s_tel" class="error">
		 							
		 						</span>
		 					</td>
		 					
		 				</tr>
		 				
		 					<tr>
		 					<td class="td_left"> <label for="gender">性别</label></td>
		 					<td class="td_right">
		 						<input type="radio" name="gender" value="male" checked=""/>男
		 						<input type="radio" name="gender" value="female" />女
		 					</td>
		 					
		 				</tr>
		 				
		 					<tr>
		 					<td class="td_left"><label for="birthday">出生日期</label></td>
		 					<td class="td_right">
		 						<input type="date" name="birthday" id="birthday" placeholder="请输入出生日期" />
		 						
		 					</td>
		 					
		 				</tr>
		 				
		 				<tr>
		 					<td colspan="2" id="td_sub">
		 						<input type="submit" id="btn_sub" value="注册" />
		 					</td>
		 				</tr>
		 				
		 			</table>
		 			
		 		</form>
		 	</div>
		 </div>
		 
		 <div class="rg_right">
		 	<p>已有账号？ <a href="#">立即登录</a></p>
		 </div>
		 
</div>
	</body>
</html>
